<template>
  <Layout class="main" style="height: 100%;">
    <Header class="header-con">
      <div class="header-bar">
        <div class="custom-content-con">
          <div style="margin-right: 10px;">{{user.name}}</div>
          <div style="margin-right: 10px;">¥ {{user.balance}}</div>
          <div style="margin-right: 10px;">
            <Icon size="large" type="ios-cart" @click="onOpenCart('open-cart')"></Icon>
          </div>
          <notice-tips @show-notice="showNotice" :has-read="hasReadNotice" :count="noticeCount"></notice-tips>
          <fullscreen v-model="isFullscreen" style="margin-right: 10px;"/>
        </div>
      </div>
    </Header>
    <Layout>
      <Sider width="320">
        <Ad :list="ad.left">
          <Alert class="drag-item" slot="left" slot-scope="left">{{ left.item.name }}</Alert>
          <Alert slot="item" slot-scope="item" type="success" show-icon>
            {{item.item.title}}
            <Icon type="ios-bulb-outline" slot="icon"></Icon>
            <template slot="desc">{{item.item.content}}</template>
          </Alert>
        </Ad>
      </Sider>
      <Content>
        <keep-alive include="list">
          <router-view/>
        </keep-alive>
      </Content>
      <Sider width="320" >
        <Ad :list="ad.right">
          <Alert slot="item" slot-scope="item" type="error" show-icon>
            {{item.item.title}}
            <template slot="desc">{{item.item.content}}</template>
          </Alert>
        </Ad>
      </Sider>
      <Spin fix v-show="loading">
        <div class="loader">
          <svg class="circular" viewBox="25 25 50 50">
            <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="5" stroke-miterlimit="10"></circle>
          </svg>
        </div>
        <div>Loading</div>
      </Spin>
    </Layout>
    <Fotter>
      <Divider>Dapianzi &dot; Carl &copy; {{ year }}</Divider>
    </Fotter>
    <Drawer v-model="openCart">
      <h1>购物车</h1>
      <div v-for="(item, idx) in cart" :key="idx">
<!--        在v-for中直接使用其他vm的data-->
        <h2>{{goods[item.id].name}}</h2>
        <p>size: {{item.details.size}}</p>
        <p>color: {{item.details.color}}</p>
        <Form inline>
          <FormItem>
            <Input style="width:100px" type="number" step="1" min="1" v-model="item.num">
              <Icon slot="prepend" type="md-remove" @click="updateCart({idx: idx, num: -1})"></Icon>
              <Icon slot="append" type="md-add" @click="updateCart({idx: idx, num: 1})"></Icon>
            </Input>
          </FormItem>
          <FormItem>
            <Button type="error" @click="updateCart({idx: idx, num: -item.num})">Delete</Button>
          </FormItem>
        </Form>
        <Divider></Divider>
      </div>
      <div class="">
        <div>总价： {{cartTotalPriceEx}}</div>
        <Button type="primary" @click="onPayCart">结算</Button>
      </div>
    </Drawer>
  </Layout>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import HeaderBar from '_c/main/components/header-bar'
import User from '_c/main/components/user'
import ABackTop from '_c/main/components/a-back-top'
import Fullscreen from '_c/main/components/fullscreen'
import Language from '_c/main/components/language'
import ErrorStore from '_c/main/components/error-store'
import Ad from '_c/dapianzi/ad'
import NoticeTips from './components/notice-tips'
export default {
  name: 'index',
  components: {
    NoticeTips,
    User,
    Language,
    Fullscreen,
    ErrorStore,
    ABackTop,
    HeaderBar,
    Ad
  },
  data: () => {
    return {
      loading: true,
      year: new Date().getFullYear(),
      isFullscreen: false,
      unreadCount: 0,
      openCart: false
    }
  },
  computed: {
    ...mapState('mall', ['ad', 'notice', 'user', 'goods', 'cart']),
    ...mapGetters('mall', ['hasReadNotice', 'noticeCount', 'cartTotalPriceEx'])
  },
  methods: {
    ...mapActions('mall', {
      initUserInfo: 'initUser',
      initAds: 'initAds',
      updateCart: 'updateCart',
      payCart: 'payCart'
    }),
    ...mapMutations('mall', ['updateCart']),
    showNotice (e) {
      console.log('show notice')
    },
    onOpenCart (e) {
      console.log(e)
      this.openCart = true
    },
    onPayCart () {
      console.log('clean cart..')
      this.payCart().then(() => {
        console.log('ok')
        this.openCart = false
      }).catch(e => {
        this.$Message.error({
          title: 'Error',
          content: '出错了 :' + e
        })
      })
    }
  },
  mounted () {
    this.initUserInfo({
      user: 'oowoolf',
      token: 'dapianzibot'
    }).then(() => {
      this.loading = false
      console.log('done')
      console.log(this.user)
    })
    this.initAds()
  },
  beforeDestroy () {
    console.log('Dapianzi\'s mall will be destroyed')
  }
}
</script>
<style lang="less">
.main{
  .logo-con{
    height: 64px;
    padding: 10px;
  img{
    height: 44px;
    width: auto;
    display: block;
    margin: 0 auto;
  }
  }
  .header-con{
    background: #fff;
    padding: 0 20px;
    width: 100%;
  }
  .main-layout-con{
    height: 100%;
    overflow: hidden;
  }
  .main-content-con{
    height: ~"calc(100% - 60px)";
    overflow: hidden;
  }
  .tag-nav-wrapper{
    padding: 0;
    height:40px;
    background:#F0F0F0;
  }
  .content-wrapper{
    padding: 18px;
    height: ~"calc(100% - 80px)";
    overflow: auto;
  }
  .left-sider{
  .ivu-layout-sider-children{
    overflow-y: scroll;
    margin-right: -18px;
  }
  }
  }
  .ivu-menu-item > i{
    margin-right: 12px !important;
  }
  .ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i {
    margin-right: 8px !important;
  }
  .collased-menu-dropdown{
    width: 100%;
    margin: 0;
    line-height: normal;
    padding: 7px 0 6px 16px;
    clear: both;
    font-size: 12px !important;
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
    transition: background 0.2s ease-in-out;
  &:hover{
     background: rgba(100, 100, 100, 0.1);
   }
  & * {
      color: #515a6e;
    }
  .ivu-menu-item > i{
    margin-right: 12px !important;
  }
  .ivu-menu-submenu > .ivu-menu > .ivu-menu-item > i {
    margin-right: 8px !important;
  }
}

  .ivu-select-dropdown.ivu-dropdown-transfer{
    max-height: 400px;
  }

</style>
